<template>
    <div id="reportCenter">
        <div class="reportCenter_content">
            <h3 class="reportCenter_title">筛选区</h3>
            <ul class="infoList_filter">
                <li class="infoList_filter_item">
                    <span class="filterSpan">来源方式</span>
                    <el-select
                    class="selectBox"
                    v-model="filterData.areaResource"
                    placeholder="请选择"
                    >
                    <el-option
                        v-for="item in filterData.areaOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                    </el-select>
                    <el-input 
                    class="inputBox"
                    placeholder="搜索报告名称/用户名称">
                    </el-input>
                </li>
                <li class="infoList_filter_item">
                    <span class="filterSpan">来源时间</span>
                    <el-time-picker
                        v-model="value1"
                        :picker-options="{
                        selectableRange:''
                        }"
                        placeholder="">
                    </el-time-picker>
                    --
                    <el-time-picker
                        arrow-control
                        v-model="value2"
                        :picker-options="{
                        selectableRange:''
                        }"
                        placeholder="">
                    </el-time-picker>
                </li>
                <li class="infoList_filter_btn">
                    <el-button type="primary">重设</el-button>
                    <!-- <el-button type="success">保存</el-button> -->
                    <el-button type="danger">查询</el-button>
                </li>
            </ul>
            <h3 class="reportCenter_title">报告列表</h3>
            <div class="createBrief">
                <el-button @click="dialogVisible=true">新建文件夹</el-button>
                <el-button>上传报告</el-button>
            </div>
            <div class="tableBox">
                <el-table
                    :data="tableData"
                    border
                    class="sentimentTable"
                    style="width: 100%">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    prop="reportName"
                    label="报告名称">
                    </el-table-column>
                    <el-table-column
                    prop="folder"
                    label="所属文件夹">
                    </el-table-column>
                    <el-table-column
                    prop="resourceTime"
                    label="来源时间">
                    </el-table-column>
                    <el-table-column
                    prop="userName"
                    label="用户名称">
                    </el-table-column>
                    <el-table-column
                    width="280px"
                    label="操作">
                    <template slot-scope>
                        <span class="tableBtn expot">未读</span>
                        <span class="tableBtn expot">下载</span>
                        <span class="tableBtn expot">移动到</span>
                        <span class="tableBtn edit">编辑名称</span>
                        <span class="tableBtn delete" @click="del">删除</span>
                        <span class="tableBtn edit">传递</span>
                    </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    background
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="page.pageSize"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next"
                    :total="page.total"
                >
                </el-pagination>
            </div>
        </div>


        <el-dialog title="新建文件夹" :visible.sync="dialogVisible" width="30%" >
            <el-form  label-width="100px">
                <el-form-item label="文件夹名称：" :error="addFolderFrom.error">
                    <el-input v-model="addFolderFrom.folderName"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="xinjianwenjianjia">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="删除" :visible.sync="dialogVisible2" width="30%" >
            <span class="deletespan">文是否删除该报告？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="shanchuwenjianjia">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 穿梭框 -->
        <transfer></transfer>
    </div>
</template>
<script>
import '../../assets/css/reportCenter.css'
import transfer from './components/transfer'
import {
    reportFolderAdd,
    reportFolderDel,
    opinionReportList
} from '@/admin/api.js'
export default {
    components: {
      transfer
    },
    data(){
        return{
            filterData: {
                defineDate: '',
                timeDate: "0", // 时间范围
                pubMood: "0", // 舆论情绪
                sortRule: "0", // 排序规则
                similarArticle: "0", // 相似文章
                areaResourceType: "0", // 来源区域
                areaResource: "0",
                areaOption: [
                { value: "0", label: "全部" },
                { value: "1", label: "微信" },
                { value: "2", label: "微博" }
                ],
                typeResource: "0" // 来源类型
            },
            value1: new Date(2016, 9, 10, 18, 40),
            value2: new Date(2016, 9, 10, 18, 40),
            tableData: [
                {
                    id: '23434',
                    pageNo: '1',
                    reportName: '文件名称1',
                    folder: '文件夹1',
                    resourceTime: '2019-11-09 12:00',
                    userName: '用户1'
                }
            ],
            page: {
                filterText: "",
                currentPage: 1,
                pageSize: [10, 20, 30, 50, 100],
                size: 10,
                total: 100
            },
            dialogVisible: false,
            dialogVisible2: false,
            addFolderFrom: {
                error: '',
                folderName: ''
            }
        }
    },
    mounted () {
        opinionReportList({
            reportSource: '',
            searchValue: '',
            beginTime: '2019-10-01',
            endTime: '2020-10-01'
        }).then(data => console.log(data))
    },
    methods:{
        handleSizeChange () {},
        handleCurrentChange () {},
        handleClose () {},
        xinjianwenjianjia () {
            if (this.addFolderFrom.folderName) {
                reportFolderAdd({
                    folderName: this.addFolderFrom.folderName
                }).then(() => {
                    this.$store.dispatch('getInfo')
                    this.dialogVisible = false
                })
            } else {
                this.addFolderFrom.error = '请输入文件夹名'
            }
        },
        del () {
            this.dialogVisible2 = true
        },
        shanchuwenjianjia () {
            reportFolderDel(1).then(() => {
                window.location.reload()
            })
        }
    }
}
</script>